<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <el-card v-loading="loading" element-loading-text="Loading..." element-loading-background="#178af01a">
          <div class="center-title">历史沿革</div>
          <div v-for="(el, index) in tableData" :key="el.title" class="tableItem">
            <div class="content">
              <div class="top">
                <div class="circle">{{ index + 1 }}、</div>
                <div class="title">{{ el.content }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { getXcwhList } from '@/views/hbwlpc/hooks/mixinsMenus';
const props = defineProps({
  lmId: {
    type: String,
    default: ''
  }
});
const queryParams = ref<OnlineQuery>({
  pageNum: 1,
  pageSize: 20,
  total: 0
});
const loading = ref(false);
const tableData = ref([]);
const getUrl = (icon) => {
  return new URL(`../../../assets/szxc/${icon}.png`, import.meta.url).href;
};
const init = async () => {
  loading.value = true;
  const data = await getXcwhList(props, queryParams.value);
  console.log('data', data);
  tableData.value = data.rows;
  queryParams.value.total = data.total;
  loading.value = false;
};
onMounted(async () => {
  await nextTick();
  init();
});
watch(
  () => props.lmId,
  (value) => {
    init();
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  overflow: hidden;
  .el-card {
    max-height: calc(90vh - 111px) !important;
    overflow: hidden auto;
    background: #178af01a;
    border: none;
    .center-title {
      font-weight: 700;
      font-size: 20px;
      color: white;
      margin-bottom: 14px;
    }
  }
  .circle {
    // width: 11px;
    // height: 11px;
    // border-radius: 50%;
    // background: linear-gradient(0deg, #4ab1ff, #ffffff);
    // border-radius: 2px;
    margin-right: 10px;
  }
  .tableItem {
    margin-bottom: 10px;

    color: white;
    border-bottom: 1px solid rgba(74, 177, 255, 0.2);

    .content {
      height: 30px;
      display: flex;
      justify-content: space-between;
      .top {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
